<template>
  <div>
    <div style="margin: 20px;">
      <Table ref="selection" :columns="feeColumns" :data="feeData"></Table>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        feeColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            icon:'',
            title: '费用类型名称',
            key: 'feename'
          },
          {
            title: '使用说明',
            key: 'state'
          },
          {
            title: '操作',
            key: 'operate',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '移动'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '设置'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          },
          {
            title:'123',
            key:'one'
          },
          {
            title:'456',
            key:'two',
            width:100
          }
        ],
        feeData: [
          {
            feename: '机票',
            state: '北京到上海，上海到北京，我现在很困很困很困。。。。。。',
            operate:[
              {start1:'delete'},
              {start2:'set'},
              {start3:'move'}
            ],
            one:1223444,
            two:1223344
          },
          {
            feename: '火车',
            state: '北京到上海',
            operate: '删除-设置-移动'
          },
          {
            feename: '火车',
            state: '北京到上海',
            operate: '删除-设置-移动'
          },
          {
            feename: '火车',
            state: '北京到上海',
            operate: '删除-设置-移动'
          }
        ]
      }
    },
    methods: {
      /*columns7: [
        {
          title: 'Name',
          key: 'name',
          render:(h,params) => {
            console.log(params)
            return h('div',[h('button',{
              text:'删除'
            }),h('button',{
              text:'添加'
            })])
          }
        }]*/
    }
  }
</script>
<style>
  /*.ivu-table-wrapper{
    border:none!important;
  }*/
  .ivu-table th.ivu-table-column-center::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: #666;
    width: 0;
    height: 0;
  }
  .ivu-table th{
    position: relative;
    font-weight: bold;
    background-color: #FFFFFF!important;
  }
  .ivu-table th::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 2px;
    height: 10px;
    background: #404040;
  }
  .ivu-table td, .ivu-table th{
    border-bottom: none!important;
  }

</style>
